<!--
底部栏
props：
tabbar_data：[{
            icon: 'fas fa-comment',

            text: '聊天'
          }, {
            icon: 'fab fa-internet-explorer',
            selected: true,
            text: '网页'
          }, {
            icon: 'fas fa-user',
            text: '我的'
          }]
emit:
selected:function(index)
-->
<template>
  <div class="container">
    <g-row>
      <g-col v-for="(item,index) in tabbar_data" :key="index" @click.native="selected=index" :class="{'selected':selected===index}">
        <i :class="item.icon"></i>
        <p>{{item.text}}</p>
      </g-col>
    </g-row>
  </div>
</template>
<script>
  import Row from '../Flex/Row.vue'
  import Col from '../Flex/Col.vue'
  export default {
    components: {
      'g-row': Row,
      'g-col': Col
    },
    data() {
      return {
        selected: 0
      }
    },
    props: {
      'tabbar_data': {
        default: function () {
          return [{
            icon: 'fas fa-comment',

            text: '聊天'
          }, {
            icon: 'fab fa-internet-explorer',
            selected: true,
            text: '网页'
          }, {
            icon: 'fas fa-user',
            text: '我的'
          }]

        }
      }
    },
    watch: {
      selected: function () {
        this.$emit('selected', this.selected);
      }
    },
    mounted() {
      for (let i in this.tabbar_data) {
        if (this.tabbar_data[i].selected) {
          this.selected = i
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  @import url('./theme.less');
  .container {
    width: 100%;
    height: 60px;
    background: @background-color;
    position: fixed;
    bottom: 0;
    left: 0;
    .selected {
      color: @select-color;
    }
    i {
      font-size: @icon-size;
      margin-top: 10px;
      line-height: @icon-size;
    }
    p {
      line-height: 20px;
      font-size: @font-size;
    }
  }

</style>
